<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=624" />

    <title>MathQuill-basic Demo</title>

    <link rel="stylesheet" type="text/css" href="support/home.css" />
    <link rel="stylesheet" type="text/css" href="../build/mathquill.css" />
  </head>
  <body>
    <div id="body">
      <a href="http://github.com/laughinghan/mathquill"
        ><img
          style="position: absolute; top: 0; right: 0; border: 0"
          src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"
          alt="Fork me on GitHub!"
      /></a>

      <h1>
        <a href="http://mathquill.github.com">MathQuill</a>-basic Demo
        <small>local test page</small>
      </h1>

      <p>
        Backslash <code>\</code> and dollar <code>$</code> aren't special,
        <code>/</code> still works, font works:
      </p>

      <p><span id="basic">\sqrt{2}</span></p>

      <p><textarea id="basic-latex"></textarea></p>
    </div>

    <script type="text/javascript" src="support/jquery-1.5.2.js"></script>
    <script type="text/javascript" src="../build/mathquill-basic.js"></script>
    <script type="text/javascript">
      MQ = MathQuill.getInterface(MathQuill.getInterface.MAX);

      var latex = $('#basic-latex').bind('keydown keypress', function () {
        var prev = latex.val();
        setTimeout(function () {
          var now = latex.val();
          if (now !== prev) mq.latex(now);
        });
      });
      var mq = MQ.MathField($('#basic')[0], {
        autoSubscriptNumerals: true,
        autoCommands:
          'alpha beta sqrt theta phi pi tau nthroot cbrt prod int ans percent mid square',
        autoParenthesizedFunctions: 'sin cos',
        handlers: {
          edit: function () {
            if (!latex.is(':focus')) latex.val(mq.latex());
          },
        },
      });
      latex.val(mq.latex());
    </script>
  </body>
</html>
